<template>
	<div class="news">
		<div class="table" v-show="parentDetailData.isTabelShow">
			<div class="container">
				<div class="handle-box">
					<div class="handle-box" style="float: left">
						<el-input v-model="searchcondition.companyName" placeholder="机构名称" class="handle-input mr10"></el-input>
						<el-button type="primary" icon="search" @click="search">搜索</el-button>
					</div>
					<div style="float: right">
						<el-button type="primary" @click="handleDetail(null,null)" icon="add">添加</el-button>
					</div>
				</div>
				<el-table stripe :data="data" border style="width: 100%" ref="multipleTable" v-loading="loading">
					<el-table-column width="100" label="封面">
						<template slot-scope="scope">
							<img style="width: 50px;height: 50px;" onerror="changeImg(event)" :src="scope.row.companyLogoUrl" alt="" />
						</template>
					</el-table-column>
					<el-table-column prop="companyName" label="名称" width="100"></el-table-column>
					<el-table-column prop="companyShortIntro" label="简介"></el-table-column>
					<el-table-column label="操作" width="150">
						<template slot-scope="scope">
							<el-button size="small" type="primary" @click="handleDetail(scope.$index, scope.row)">编辑</el-button>
							<el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
				<div class="pagination">
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 50]" :page-size="searchcondition.PageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
					</el-pagination>
				</div>
			</div>
		</div>
		<detail ref="detail" :id="id" :parentDetailData="parentDetailData" v-on:close="handleClose"></detail>
	</div>
</template>

<script>
	import Vue from 'vue';
	import $ from 'jquery';
	import service from '../../../js/services/companyservice.js';
	import detail from './detail';
	let img = require('@/assets/nodata.jpg');

	window.changeImg = function(e) {
		console.log(e)
		$(e.target).attr('src', img)
	}
	export default {
		components: {
			detail
		},
		data() {
			return {
				tableData: [],
				searchcondition: {
					pageNum: 1,
					pageSize: 10,
					companyName: ''
				},
				total: 0,
				id: 0,
				parentDetailData: {
					isTabelShow: true
				},
				loading: true
			}
		},
		mounted() {
			service.getPageData(this);
		},
		computed: {
			data() {
				return this.tableData;
			}
		},
		methods: {
			search() {
				this.searchcondition.pageNum = 1;
				service.getPageData(this);
			},
			handleCurrentChange(val) { //翻页
				this.searchcondition.pageNum = val;
				service.getPageData(this);
			},
			handleSizeChange(val) { //每页数量
				this.searchcondition.PageSize = val;
				service.getPageData(this);
			},
			handleDetail(index, row) {
				service.showDetail(this, row);
			},
			handleClose() {
				service.getPageData(this);
			},
			handleDelete(index, row) {
				service.handleDelete(this, row.id);
			},
		}
	}
</script>

<style lang="less" scoped="scoped">
	.handle-box {
		margin-bottom: 20px;
	}
</style>